<template>
    <!--迷你播放器-->
    <div class="player">
        <!--播放按钮-->
        <div class="player-tools">
            <div class="tool prev-song">
                <i class="tool-icon fa fa-step-backward" aria-hidden="true" @click="perv"></i>
            </div>
            <div class="tool play" v-if="!playStatus" @click="changePlayStatus">
                <span class="play-icon icon iconfont icon-play-btn"></span>
            </div>
            <div class="tool pause" v-else @click="changePlayStatus">
                <span class="pause-icon icon iconfont icon-pause"></span>
            </div>
            <div class="tool next-song">
                <i class="tool-icon fa fa-step-forward" aria-hidden="true" @click="next"></i>
            </div>
        </div>
        <!--开始时间-->
        <div class="time start-time">{{formatTime(currentTime)}}</div>
        <!--播放进度条-->
        <div class="play-progress-bar-box">
            <div class="ex-bar" @mousedown="progressClick($event,'song')">
                <div class="play-progress-bar" ref="progressBar">
                    <div class="load-bar" :style="`width:${currentSongLoad}%`"></div>
                    <div ref="progress" class="play-progressed-bar"></div>
                    <div ref="progressBtn" class="btn" :class="sequenceList.length !== 0 && !playReady?'loading-btn':''"
                         @mousedown.prevent="progressTouchStart($event,'song')">
                    </div>
                </div>
            </div>
        </div>
        <!--结束时间-->
        <div class="time end-time">{{formatTime(audio.duration)}}</div>
        <!--工具栏-->
        <div class="volume-box">
            <div class="icon-box" @click="closeOrOpenVolume">
                <Icon type="md-volume-up" v-if="openVolume"/>
                <Icon type="md-volume-mute" v-if="!openVolume"/>
            </div>
            <div class="volume-bar-box">
                <div class="ex-bar" @mousedown="progressClick($event,'volume')">
                    <div class="volume-bar" ref="volumeProgressBar">
                        <div ref="volumeProgress" class="volume-progressed-bar"></div>
                        <div ref="volumeProgressBtn" class="btn"
                             @mousedown.prevent="progressTouchStart($event,'volume')">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="model">
            <m-player-font-icon @changePlayMode="changePlayMode" @openList="openList"/>
        </div>
        <!--当前播放歌曲显示-->
        <div ref="currentPlaySong" class="current-play-song">
            <div class="current-song-img-box">
                <div class="up" @click="openFullScreenPlayer">
                    <i class="up-icon fa fa-angle-double-up" aria-hidden="true"></i>
                </div>
                <img ondragstart="return false" class="img" v-lazy="handleLazyImage(currentPlaySong.image)"
                     :alt="currentPlaySong.name" :key="currentPlaySong.image">
            </div>
            <div class="current-song-info">
                <div class="song-name">
                    <span v-html="currentPlaySong.name"></span>
                </div>
                <div class="singers">
                    <span class="singer-name" v-for="(singer) in currentPlaySong.singers" :key="singer.singerMid"
                          v-html="singer.singerName" @click="toSingerDetail(singer)" @dblclick.stop=""></span>
                </div>
            </div>
            <!--收藏按钮-->
            <i class="love-btn fa fa-heart-o" aria-hidden="true" title="收藏"
               @click.stop="saveFavoriteSong"
               v-if="isFavoriteSong"></i>
            <i class="unlove-btn fa fa-heart" aria-hidden="true" title="取消收藏"
               @click.stop="deleteFavoriteSong"
               v-else></i>
        </div>
    </div>
</template>

<script>
  import MPlayerFontIcon from '../icon/m-player-font-icon'
  import ClipLoader from 'vue-spinner/src/ClipLoader'
  import { Icon } from 'view-design'
  import SongDefLazyImg from '../../../resources/images/playlist_300.png'

  export default {
    name: 'm-mimi-player',
    components: {
      MPlayerFontIcon,
      ClipLoader,
      Icon
    },
    props: {
      currentPlaySong: {
        type: Object
      },
      playStatus: {
        type: Boolean
      },
      currentTime: {
        type: Number
      },
      currentSongLoad: {
        type: Number
      },
      sequenceList: {
        type: Array
      },
      playReady: {
        type: Boolean
      },
      audio: {
        type: Object
      },
      openVolume: {
        type: Boolean
      },
      loginUser: {
        type: Object
      },
      favoriteSongList: {
        type: Array
      }
    },
    computed: {
      isFavoriteSong () {
        // 未登录
        if (this.loginUser === null || this.favoriteSongList === null) {
          return true
        }
        return this.favoriteSongList.findIndex((item) => item.id + '' === this.currentPlaySong.id + '') === -1
      },
      handleLazyImage () {
        return (ImgSrc) => {
          return {
            src: ImgSrc,
            error: SongDefLazyImg,
            loading: SongDefLazyImg
          }
        }
      }
    },
    methods: {
      // 上一首
      perv () {
        this.$emit('perv')
      },
      // 下一首
      next () {
        this.$emit('next')
      },
      // 改变播放状态
      changePlayStatus () {
        this.$emit('changePlayStatus')
      },
      // 滑动条点击
      progressClick (e, type) {
        this.$emit('progressClick', e, type)
      },
      // 滑动条滑动
      progressTouchStart (e, type) {
        this.$emit('progressTouchStart', e, type)
      },
      // 打开或关闭音量
      closeOrOpenVolume () {
        this.$emit('closeOrOpenVolume')
      },
      // 改变播放模式
      changePlayMode () {
        this.$emit('changePlayMode')
      },
      // 打开播放列表
      openList () {
        this.$emit('openList')
      },
      // 打开全屏播放器
      openFullScreenPlayer () {
        this.$emit('openFullScreenPlayer')
      },
      // 歌手详情页
      toSingerDetail (singer) {
        this.$emit('toSingerDetail', singer)
      },
      // 收藏正在播放的歌曲
      saveFavoriteSong () {
        this.$emit('saveFavoriteSong', this.currentPlaySong)
      },
      // 取消收藏正在播放的歌曲
      deleteFavoriteSong () {
        this.$emit('deleteFavoriteSong', this.currentPlaySong)
      },
      // 格式化时间
      formatTime (interval) {
        interval = interval | 0
        const minute = interval / 60 | 0
        const second = this._pad(interval % 60)
        return `${minute}:${second}`
      },
      _pad (num, n = 2) {
        let len = num.toString().length
        while (len < n) {
          num = '0' + num
          len++
        }
        return num
      }
    }
  }
</script>

<style lang="less">
    .player {
        user-select: none;
        height: 51px;
        width: 100%;
        min-width: 1020px;
        position: absolute;
        bottom: 0;
        z-index: 999;
        padding: 5px 310px 5px 240px;
        border-top: 0.1px solid var(--mini-player-background-color);
        background: var(--mini-player-background-color);

        .player-tools {
            position: absolute;
            width: 200px;
            height: 40px;
            color: var(--font-base-color);
            left: 0;
            padding: 0 10px;
            text-align: center;

            .tool {
                display: flex;
                justify-content: center;
                align-items: center;
                float: left;
                height: 40px;
                width: 40px;
                line-height: 40px;
                margin: 0 10px;

                i {
                    display: inline;
                }

                .tool-icon:hover {
                    cursor: pointer;
                    color: var(--font-active-color);
                }
            }

            .prev-song {
                padding: 5px;

                .tool-icon {
                    font-size: 24px;
                    position: relative;
                }
            }

            .play {
                cursor: pointer;
                padding: 2.5px;

                .play-icon {
                    color: var(--font-active-color);
                    font-size: 38px;
                    position: relative;
                }
            }

            .pause {
                cursor: pointer;
                padding: 2.5px;

                .pause-icon {
                    color: var(--font-active-color);
                    font-size: 38px;
                    position: relative;
                }
            }

            .next-song {
                padding: 5px;

                .tool-icon {
                    font-size: 24px;
                    position: relative;
                }
            }
        }

        .time {
            position: absolute;
            width: 40px;
            height: 40px;
            line-height: 40px;
            padding: 0 3px;
            font-size: 12px;
            text-align: center;
            color: var(--font-tow-color);
            display: inline-block;
        }

        .start-time {
            left: 200px;
        }

        .play-progress-bar-box {
            width: 100%;
            height: 40px;
            line-height: 40px;
            display: inline-block;
            padding: 14px 8px;

            .ex-bar {
                cursor: pointer;
                padding: 4px 0;

                .play-progress-bar {
                    position: relative;
                    height: 4px;
                    background: var(--play-progress-bar-color);
                    border-radius: 2px;

                    .load-bar {
                        position: absolute;
                        height: 4px;
                        background: var(--load-bar-color);
                        border-radius: 2px;
                    }

                    .play-progressed-bar {
                        position: relative;
                        width: 0;
                        height: 4px;
                        background: var(--font-active-color);
                        border-radius: 2px;
                    }

                    .btn {
                        position: absolute;
                        width: 12px;
                        height: 12px;
                        border-radius: 50%;
                        background: var(--font-active-color);
                        top: -4px;
                        left: -6px;
                    }

                    .loading-btn {
                        animation: loading 1s infinite;
                    }

                    .btn:hover {
                        cursor: pointer;
                    }

                    @keyframes loading {
                        0% {
                            transform: scale(1);
                        }

                        50% {
                            transform: scale(1.2);
                        }

                        100% {
                            transform: scale(1);
                        }
                    }
                }
            }
        }

        .end-time {
            right: 270px;
        }

        .volume-box {
            height: 40px;
            width: 140px;
            position: absolute;
            right: 130px;
            padding: 0 5px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            top: 6px;

            .icon-box {
                height: 40px;
                width: 24px;
                font-size: 24px;
                color: var(--font-tow-color);
                margin-right: 6px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .icon-box:hover {
                cursor: pointer;
                color: var(--font-active-color);
            }

            .volume-bar-box {
                height: 40px;
                width: 100px;
                display: flex;
                justify-content: center;
                align-items: center;

                .ex-bar {
                    width: 100%;
                    height: 16px;
                    padding: 6px 0;

                    .volume-bar {
                        position: relative;
                        width: 100%;
                        height: 4px;
                        background: var(--play-progress-bar-color);
                        border-radius: 2px;
                    }

                    .volume-progressed-bar {
                        position: relative;
                        width: 0;
                        height: 4px;
                        background: var(--font-active-color);
                        border-radius: 2px;
                    }

                    .btn {
                        position: absolute;
                        width: 12px;
                        height: 12px;
                        border-radius: 50%;
                        background: var(--font-active-color);
                        top: -4px;
                        left: -6px;
                        opacity: 0;
                        z-index: -1;
                    }
                }

                .ex-bar:hover {
                    cursor: pointer;

                    .btn {
                        opacity: 1;
                        z-index: 10;
                    }
                }
            }
        }

        .model {
            position: absolute;
            height: 40px;
            width: 130px;
            right: 0;
            padding: 0 5px;
            display: inline-block;
            top: 5px;
        }

        .current-play-song {
            width: 200px;
            height: 60px;
            position: absolute;
            background: var(--current-play-song-background-color);
            top: -61px;
            left: 0;
            padding: 8px 30px 8px 5px;
            transform: translate3d(-100%, 0, 0);
            transition: transform 300ms;

            .love-btn {
                position: absolute;
                right: 8px;
                top: 12px;
                color: var(--no-favorite-color);
                margin-right: 5px;
            }

            .love-btn:hover {
                color: var(--favorite-color);
                cursor: pointer;
                margin-right: 5px;
            }

            .unlove-btn {
                position: absolute;
                right: 8px;
                top: 12px;
                color: var(--favorite-color);
                cursor: pointer;
                margin-right: 5px;
            }

            .current-song-img-box {
                float: left;
                cursor: pointer;
                position: relative;

                .up {
                    position: absolute;
                    display: inline-block;
                    width: 44px;
                    height: 44px;
                    color: #000;
                    text-align: center;
                    background: #00000052;
                    overflow: hidden;
                    opacity: 0;

                    .up-icon {
                        position: relative;
                        font-size: 30px;
                        top: 40px;
                        transition-property: top;
                        transition-duration: 0.2s;
                    }
                }

                .img {
                    width: 44px;
                    height: 44px;
                    display: block;
                }

                .up:hover {
                    opacity: 1;

                    .up-icon {
                        top: 8px;
                    }
                }
            }

            .current-song-info {
                float: left;
                font-size: 12px;
                padding: 0 8px;
                width: 120px;

                .song-name {
                    width: 100%;
                    height: 22px;
                    line-height: 22px;
                    color: var(--current-play-song-name-color);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;

                    span:hover {
                        cursor: pointer;
                    }
                }

                .singers {
                    width: 100%;
                    height: 22px;
                    line-height: 22px;
                    color: var(--font-tow-color);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;

                    span {
                        margin-right: 5px;
                    }

                    span:hover {
                        color: var(--font-active-color);
                        cursor: pointer;
                    }
                }
            }
        }
    }
</style>
